@charset "UTF-8";

			/**第一步  准备结构和基本样式*/
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 黑体;
			}
			
			body{
				overflow: hidden;
			}
			
			section{/*整体开启flex布局添加渐变背景*/
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: linear-gradient(to bottom,#f1f4f9,#dff1ff);
			}
			
			
			/*设置不同盒子的位置和颜色*/
			section .color{
				position: absolute;
			}
			section .color:nth-child(1){
				top: -350px;
				width: 100%;
				height: 700px;
				background: #ff359b;
			}
			section .color:nth-child(2){
				bottom: -150px;
				left: 300px;
				width: 80%;
				height: 700px;
				background: #fffd87;
			}
			section .color:nth-child(3){
				bottom: 80px;
				right: 400px;
				width: 30%;
				height: 380px;
				background: #00dfff;
			}
			section .color{/*滤镜设置模糊*/
				filter: blur(250px);
			}
			
			.container{
				position: relative;
				width: 500px;
				min-height: 500px;
				background: rgba(255,255,255,.1);
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				backdrop-filter: blur(5px);
				box-shadow: 0 25px 45px rgba(0,0,0,.1);
				border: 1px solid rgba(255,255,255,.5);
				border-right: 1px solid rgba(255,255,255,.2);
				border-bottom: 1px solid rgba(255,255,255,.2);
 			}
			.form{
				position: relative;
				width: 100px;
				height: 100px;
				padding: 40px;
				
			}
			.form h2{
				position: relative;
				color: #fff;
				font-size: 24px;
				font-weight: 600px;
				letter-spacing: 1px;
				margin-bottom: 40px;/*设置标题样式*/
				
			}
			.form h2::before{
				content: "";
				position: absolute;
				left: 0;
				bottom: -10px;
				width: 80px;
				height: 4px;
				background: #fff;
			}
			.form .inputBox{
				width: 100px;
				margin-top: 20px;
			}
			.form .inputBox input{/*修改input样式*/
				width: 100%;
				background: rgba(255,255,255,.2);
				border: none;
				outline: none;
				padding: 10px 20px;
				border-radius: 35px;
				box-shadow:0 25px 45px rgba(0,0,0,.5) ;
				border-right: 1px solid rgba(255,255,255,.2);
				border-bottom: 1px solid rgba(255,255,255,.2);
				letter-spacing: 1px;
				color:#fff;
				box-shadow: 0px 5px 15px rgba(0,0,0,.05);
			}
			.form .inputBox input::placeholder{/*修改input提示文字颜色*/
				color: #fff;
			}
			.form .inputBox input[type="submit"]{/*设置登录按钮的样式*/
				background: #fff;
				color: #666;
				max-width: 100px;
				cursor: pointer;
				margin-bottom: 20px;
				font-weight: 600;
			}
			.forget{/*设置  忘记密码 注册 字体和颜色*/
				margin-top: 5px;
				color:#fff;
			}
			.forget a{
				color: #fff;
				font-weight: 600;
			}
			
			.box{
				position: relative;
			}
			.box .square{
				position: absolute;
				width: 100px;
				height: 100px;
				background: rgba(255,255,255,.1);
				backdrop-filter: blur(5px);
				box-shadow: 0 25px 45px rgba(0,0,0,.1);
				border: 1px solid rgba(255,255,255,.5);
				border-right: 1px solid rgba(255,255,255,.2);
				border-bottom: 1px solid rgba(255,255,255,.2);
				border-radius: 10px;
			}
			.box .square:nth-child(1){/*设置五个盒子的大小和位置*/
				top:-50px;
				right: -60px;
				width: 100px;
				height: 100px;
			}
			.box .square:nth-child(5){
				top:-80px;
				left: 140px;
				width: 60px;
				height: 60px;
			}
			.box .square{
				animation: animate 10s linear infinite;
				animation-delay: calc(-1s*var(--i));
			}
			
			@keyframes animate{
				0%,100%{
					transform: translateY(-40px);
				}
				50%{
			    	transform: translateY(40px);
				}
			}
		
.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid rgb(228, 215, 167);
  border-radius: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  }